90 Minute Introduction to the Fusion Theming Framework for Drupal

90 Minute Introduction to the Fusion Theming
Framework for Drupal

Stephanie Pakrul Bryan House
Co-Founder Sr. Director, Marketing
Top Notch Themes Acquia
@topnotchthemes @bryanhouse

Upcoming Webinars

 Thursday July 29th
– How Drupal 7 - The Top 40 Core Modules and What They
Mean for You
Register Today - http://acquia.com/webinars

Drupal Theming with Fusion

presented by:

Stephanie Pakrul - TopNotchThemes
June 17, 2010

Introductions

 Hi, I’m Stephanie
 Co-founder of TopNotchThemes
 Building Drupal themes for over 4 years
 Launched the first all-Drupal premium theme store
in 2008

http://fusiondrupalthemes.com

Who is Fusion for?

Non-themers Developers & Themers
 Easy CSS-only theming  Rapid prototyping

 Bulletproof cross-browser  Decouple workflow

layouts through Drupal's UI  Grids without the math

 Grid enforces design  Stop reinventing the wheel
consistency
 Sustainable theming
 Free & commercial support
 Easier maintenance


What is Fusion?

and how can it make my life easier?

What is Fusion?

FUSION CORE Base theme

960.gs-style Exposes UI
CSS grid GRID SKINR MODULE options

Inherits from
FUSION SUBTHEME Fusion Core


A Next Generation Base Theme

 Lots of helpful classes and wrappers
 Integrated Superfish for dropdown menus
 Accessible, SEO-friendly, supports RTL
 Well commented with scaffolding CSS
 Helpful styling for popular modules
 A team of awesome themers behind it!


5 Steps to Build a Fusion Theme

 Copy & rename fusion_starter subtheme
 Set up basic layout through .info file and/or Drupal UI
 Do general theming in CSS – basic typography,
backgrounds, etc.
 Create Skinr styles in .info file and CSS for blocks, Views,
content types, and more
 Apply these to your content through Skinr's UI


Layout in Fusion

css grids, without the headache

What's a CSS Grid?

 System of CSS classes to
define layout
 Enforces visual consistency

 Fusion exposes a grid
system through Drupal's UI
 Easily create custom grids

 Further reading about grids:
http://bit.ly/bFQLHi


960px Grid w/ Layout Options

 16/12 column layout

 Fluid or fixed width

 Sidebars split, both first
or both last

 Configurable sidebar
widths


960px Grid w/ Layout Options

 16/12 column layout

 Fluid or fixed width

 Sidebars split, both
first or both last

 Configurable sidebar
widths


Fusion Regions
 Lots of collapsible regions
 Use block visibility, widths, and position to create
thousands of possible layouts
 Blocks will divide equally per region to fill their row
 You can override widths manually or set a block to
drop to a new row


Fusion Regions

search login header header

header header banner

content

sidebar
content content
sidebar

sidebar
sidebar

content

footer footer footer footer


Skinr in Fusion

style once, reapply liberally

Why Skinr?
 Skinr provides the user
interface for styles
 Build modular,
extensible styles
 Share styles across
different types of
content


Skinr Integration
Are you thinking “Whoop-dee-do. I can add Skinr to any base theme” ?

 Fusion comes with ready-to-use Skinr styles
 Cut back on repetitive work. Add a few lines of custom CSS
to tweak the Fusion styles to your theme
 Disable any unwanted Fusion styles and add your own


Some of Fusion’s Skinr Styles
 Horizontal login form
 Multi-column menu
 2 or 3 column lists
 Vertical dropdowns
 jQuery Equal Heights


More Skinr Features
 Apply multiple classes with one skin
 Conditionally load CSS, JS, or a custom .tpl.php file
 Import/export styles in bulk
 Resizable modal with live previews (2.x only)
 Page-level (2.x) and region-level (D7) skins
 Skin sets can also live in sites/*/skins with their own
.info files and be enabled/disabled like modules (2.x)


Tweaking Fusion’s Skinr Styles

 Just add CSS!
Your theme’s CSS files will
override Fusion core’s styles.
Tweak slightly with updated
colors and fonts
Or completely change the
style


Disabling Fusion’s Skinr Styles

 Find the set of styles in
Fusion Core’s .info file
 Copy the styles to your
theme’s .info
 Remove / tweak individual
options
 Or remove the entire set


Disabling Fusion’s Skinr Styles

 Find the set of styles in
Fusion Core’s .info file
 Copy the styles to your
theme’s .info
 Remove / tweak
individual options
 Or remove the entire set


Adding Custom Skinr Styles

 Define the style in
your .info file

 Enable the style on a
block, view or panel

 Add CSS


Sites using Fusion

in the wild...

Sites using Fusion

Interaction Design  Chiyopia
Association http://www.chiyopia.com
http://www.ixda.org
 RheumMD
StatusNet
http://rheummd.org
http://status.net
 Kinetex Resources
Intelligent Utility Corporation
http://www.intelligentutility.com http://www.kinetex.ca


Coding time!

time to roll up our sleeves...

Looking Ahead – Fusion
 Drupal 7 version in dev – straight port first, then 2.x
 Moving theme settings into Skinr styles
 Community repository of skin sets
 Better Context/Spaces/Features integration
 Better support of Panels


Looking Ahead – TopNotchThemes

 Launch of PowerSites for all premium themes
 Expecting to complete TNT theme upgrades this fall
 Expanding Fusion PRO
 Currently finalizing initial version of a partner program
 More documentation, screencasts, etc.


Continuing Ed.

Documentation and Resources

Fusion Documentation

 User Documentation
http://fusiondrupalthemes.com/support/documentation

 How to Create a Custom Grid for Fusion
http://fusiondrupalthemes.com/support/theme-developers/grid-
concepts/creating-custom-grid-definition

 Developer Center
http://fusiondrupalthemes.com/developers


Get More Help

 Fusion Forums
http://fusiondrupalthemes.com/forum/using-fusion

 TopNotchThemes on IRC
http://drupal.org/irc
#topnotchthemes

 Fusion Issue Queue
http://drupal.org/project/issues/fusion


Fusion Downloads

 Fusion Core
http://drupal.org/project/fusion

 Free Fusion Subthemes from TNT
http://drupal.org/project/acquia_marina
http://drupal.org/project/acquia_prosper
http://drupal.org/project/acquia_slate
http://drupal.org/project/magazeen

 Fusion Distro
http://drupal.org/project/fusion_distro


Get a Fusion Demo Site
Get a copy of the Magazeen theme demo site used in
today's webinar at:
http://www.webenabled.com/application/tnt-fusion


90 Minute Introduction to the Fusion Theming Framework for Drupal

More Related Content

Viewers also liked

Similar to 90 Minute Introduction to the Fusion Theming Framework for Drupal

More from Acquia

Recently uploaded

90 Minute Introduction to the Fusion Theming Framework for Drupal